<template>
  <div class="resignation-details">
    <el-form 
      :model="formData" 
      :rules="rules" 
      ref="formRef" 
      label-width="150px"
      v-loading="loading"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="员工姓名" prop="employeeName">
            <el-input v-model="formData.employeeName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工号" prop="employeeId">
            <el-input v-model="formData.employeeId" />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="身份证号" prop="idCardNumber">
            <el-input v-model="formData.idCardNumber" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门" prop="department">
            <el-input v-model="formData.department" />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="岗位" prop="position">
            <el-input v-model="formData.position" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="聘用形式" prop="employmentForm">
            <el-input v-model="formData.employmentForm" />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="入职时间" prop="entryDate">
            <el-date-picker 
              v-model="formData.entryDate" 
              type="date" 
              value-format="YYYY-MM-DD"
              style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门主管" prop="departmentHead">
            <el-input v-model="formData.departmentHead" />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="经办HR" prop="handlingHr">
            <el-input v-model="formData.handlingHr" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预计离职时间" prop="expectedResignationDate">
            <el-date-picker 
              v-model="formData.expectedResignationDate" 
              type="date" 
              value-format="YYYY-MM-DD"
              style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="离职原因" prop="reasonForResignation">
            <el-input 
              v-model="formData.reasonForResignation" 
              type="textarea" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工作交接人" prop="workHandoverPerson">
            <el-input v-model="formData.workHandoverPerson" />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="工作交接确认" prop="workHandoverConfirmation">
            <el-select v-model="formData.workHandoverConfirmation" style="width: 100%">
              <el-option label="已确认" value="已确认" />
              <el-option label="未确认" value="未确认" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="财务交接确认" prop="financialHandoverConfirmation">
            <el-select v-model="formData.financialHandoverConfirmation" style="width: 100%">
              <el-option label="已确认" value="已确认" />
              <el-option label="未确认" value="未确认" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="行政交接确认" prop="administrativeHandoverConfirmation">
            <el-select v-model="formData.administrativeHandoverConfirmation" style="width: 100%">
              <el-option label="已确认" value="已确认" />
              <el-option label="未确认" value="未确认" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="人事交接确认" prop="personnelHandoverConfirmation">
            <el-select v-model="formData.personnelHandoverConfirmation" style="width: 100%">
              <el-option label="已确认" value="已确认" />
              <el-option label="未确认" value="未确认" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="正式离职日期" prop="officialResignationDate">
            <el-date-picker 
              v-model="formData.officialResignationDate" 
              type="date" 
              value-format="YYYY-MM-DD"
              style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="HR确认" prop="hrConfirmation">
            <el-select v-model="formData.hrConfirmation" style="width: 100%">
              <el-option label="已确认" value="已确认" />
              <el-option label="未确认" value="未确认" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="提交时间" prop="applicationDate">
            <el-date-picker 
              v-model="formData.applicationDate" 
              type="date" 
              value-format="YYYY-MM-DD"
              style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-form-item>
        <el-button type="primary" @click="saveData">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const props = defineProps({
  resignationData: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update-success', 'cancel'])

const formRef = ref()
const loading = ref(false)

// 表单数据
const formData = reactive({
  resignationId: null,
  employeeName: '',
  employeeId: '',
  idCardNumber: '',
  department: '',
  position: '',
  employmentForm: '',
  entryDate: '',
  departmentHead: '',
  handlingHr: '',
  expectedResignationDate: '',
  reasonForResignation: '',
  workHandoverPerson: '',
  workHandoverConfirmation: '',
  financialHandoverConfirmation: '',
  administrativeHandoverConfirmation: '',
  personnelHandoverConfirmation: '',
  officialResignationDate: '',
  hrConfirmation: '',
  applicationDate: ''
})

// 表单验证规则
const rules = {
  employeeName: [{ required: true, message: '请输入员工姓名', trigger: 'blur' }],
  employeeId: [{ required: true, message: '请输入工号', trigger: 'blur' }],
  idCardNumber: [{ required: true, message: '请输入身份证号', trigger: 'blur' }]
}

watch(
  () => props.resignationData,
  (newVal) => {
    if (newVal) {
      Object.keys(formData).forEach(key => {
        formData[key] = newVal[key] || ''
      })
    }
  },
  { immediate: true }
)

// 保存数据
const saveData = async () => {
  if (!formData.resignationId) {
    ElMessage.error('数据ID不存在')
    return
  }
  
  try {
    loading.value = true
    const response = await axios.put(`/api/resignation/${formData.resignationId}`, formData)
    
    if (response.data.code === 200) {
      ElMessage.success('保存成功')
      emit('update-success', formData)
    } else {
      ElMessage.error(response.data.message || '保存失败')
    }
  } catch (error) {
    console.error('保存失败:', error)
    ElMessage.error('保存失败: ' + (error.response?.data?.message || error.message))
  } finally {
    loading.value = false
  }
}

// 取消操作
const cancel = () => {
  emit('cancel')
}
</script>

<style scoped>
.resignation-details {
  padding: 20px;
}
</style>